<template>
  <div class="container">
    <div class="headline">
      <h3>Notice and Announcement</h3>
      <router-link to="/NoticeAnnouncement" tag="div" class="button">more</router-link>
    </div>
    <div class="list-wrapper">
      <ul class="list-ul">
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
        <li><span class="iconfont earth list-icon">&#xe8ee;</span>
        <router-link to="/NoticeContent" tag="a">The selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule, and the selection work of 2020 undergraduate teaching quality award of the college was carried out on schedule</router-link>
        <span class="list-date">2020-01-02</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeNotice'
}
</script>

<style lang="scss" scoped>
.container {
  display: inline-block;
  width: 50%;
  height: 520px;
  padding-right: 40px;
  box-sizing: border-box;
  overflow: hidden;
  // background-color: #ccc;
  .headline {
    display: block;
    margin: 60px 0 20px 0;
    border-bottom: 1.5px dotted #e4e9f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      color: #585f69;
      margin: 0 0 -2px 0;
      padding-right: 10px;
      display: inline-block;
      font-size: 23px;
      font-weight: 500;
      line-height: 54px;
      text-shadow: 0 0 1px #f6f6f6;
      border-bottom: 2px solid #72c02c;
    }
    .button {
      width: 76px;
      height: 30px;
      border-radius: 2px 2px 2px 2px;
      background-color: #567f32;
      color: #fff;
      font-size: 16px;
      padding: 4px 18px;
      box-sizing: border-box;
      cursor: pointer;
      transition: all .3s linear;
      &:hover {
        background-color: #72c02c;
      }
    }
  }
  .list-wrapper {
    width: 100%;
    height: 515px;
    // background-color: rgb(248, 229, 229);
    .list-ul {
      list-style: none;
      padding: 0;
      li {
        position: relative;
        height: 48px;
        line-height: 48px;
        font-size: 15px;
        display: flex;
        .list-icon {
          color: #72c02c;
          font-size: 25px;
        }
        a {
          margin-left: 10px;
          text-decoration: none;
          cursor: pointer;
          letter-spacing: 1px;
          display: inline-block;
          width: 480px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #555;
          transition: all .3s linear;
          &:hover {
            text-decoration: underline;
            color: #72c02c;
          }
        }
        .list-date {
          position: absolute;
          right: 0;
          color: #555;
        }
      }
    }
  }
}
</style>
